<template>
  <div id="songDetail">
    <el-row type="flex" justify="center">
      <el-col :xm="12" :sm="12" :md="12" :lg="12" :xl="12">
        <el-row type="flex" justify="space-between">
          <el-col :xm="8" :sm="8" :md="8" :lg="8" :xl="8">
            <div class="images">
              <div class="icon">
                <img v-lazy="$store.state.nowMusic.al.picUrl" alt="" />
              </div>
            </div>
            <el-row type="flex" justify="space-between">
              <div class="btns love"><Icon type="ios-heart-outline" /></div>
              <div class="btns collect">
                <div class="el-icon-folder-add"></div>
              </div>
              <div class="btns download">
                <Icon type="ios-cloud-download-outline" />
              </div>
              <div class="btns share">
                <Icon type="ios-share-alt-outline" />
              </div>
            </el-row>
          </el-col>
          <el-col :xm="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-row class="title" type="flex" justify="start" align="bottom"
              ><p class="songname nowrap">{{ $store.state.nowMusic.name }}</p>
              <div class="tags mv" v-show="$store.state.nowMusic.mv">MV</div>
              <div class="tags qua">标准音质</div>
            </el-row>
            <el-row
              class="song-desc"
              type="flex"
              justify="space-between"
              align="middle"
            >
              <p>
                专辑：<span>{{ $store.state.nowMusic.al.name }}</span>
              </p>
              <p>
                歌手：<span>{{ $store.state.nowMusic.ar[0].name }}</span>
              </p>
              <p>来源：<span>未知</span></p>
            </el-row>
            <div class="lyric">
              <div class="ly-content">
                <li
                  v-for="(item, index) in $store.state.lyric.split(
                    /[[0-9]*:[0-9]*.[0-9]*]*/gi
                  )"
                  :key="index"
                >
                  <p>{{ item }}</p>
                </li>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" class="comment-content">
          <el-col :xm="14" :sm="14" :md="14" :lg="14" :xl="14">
            <div class="comment">
              <p class="titles">
                评论<span class="comment-num"
                  >(已有{{ $store.state.songcomment.total }}条评论)</span
                >
              </p>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6 }"
                placeholder="发表评论"
                v-model="textarea2"
              >
              </el-input>
              <p class="tit">精彩评论</p>
              <el-row
                class="hot-item"
                v-for="(item, index) in $store.state.songcomment.hotComments"
                :key="index"
                type="flex"
                justify="space-between"
              >
                <div class="left">
                  <div class="icon">
                    <img v-lazy="item.user.avatarUrl" alt="" />
                  </div>
                  <div class="user-comm">
                    <p class="username">
                      <span>{{ item.user.nickname }}:</span>{{ item.content }}
                    </p>
                    <div class="right">
                      <p class="up-time">
                        {{ new Date(item.time).toLocaleString() }}
                      </p>
                      <ul>
                        <li>举报</li>
                        <li>
                          <Icon type="ios-thumbs-up-outline" /><span
                            v-show="item.likedCount > 0"
                            >{{ item.likedCount }}</span
                          >
                        </li>
                        <li><Icon type="ios-share-outline" /></li>
                        <li><Icon type="ios-text-outline" /></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </el-row>
              <div class="more-btn">
                <Button type="default" shape="circle">
                  更多精彩评论
                  <Icon type="ios-arrow-forward"></Icon>
                </Button>
              </div>
              <p class="titles">
                最新评论<span class="comment-num"
                  >({{ $store.state.songcomment.total }})</span
                >
              </p>
              <el-row
                class="hot-item"
                v-for="(item, indexs) in $store.state.songcomment.comments"
                :key="indexs + 's'"
                type="flex"
                justify="space-between"
              >
                <div class="left">
                  <div class="icon">
                    <img v-lazy="item.user.avatarUrl" alt="" />
                  </div>
                  <div class="user-comm">
                    <p class="username">
                      <span>{{ item.user.nickname }}:</span>{{ item.content }}
                    </p>
                    <div class="right">
                      <p class="up-time">
                        {{ new Date(item.time).toLocaleString() }}
                      </p>
                      <ul>
                        <li>举报</li>
                        <li>
                          <Icon type="ios-thumbs-up-outline" /><span
                            v-show="item.likedCount > 0"
                            >{{ item.likedCount }}</span
                          >
                        </li>
                        <li><Icon type="ios-share-outline" /></li>
                        <li><Icon type="ios-text-outline" /></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </el-row>
              <el-row class="page" type="flex" justify="center">
                <el-pagination
                  background
                  @prev-click="handleCurrentChange"
                  @next-click="handleCurrentChange"
                  @current-change="handleCurrentChange"
                  layout="prev, pager, next"
                  :page-size="20"
                  :total="$store.state.songcomment.total"
                >
                </el-pagination>
              </el-row>
            </div>
          </el-col>
          <el-col :xm="8" :sm="8" :md="8" :lg="8" :xl="8">
            <div class="right-list">
              <p>相似歌曲</p>
              <ul>
                <li v-for="(item, index) in similarSongs.songs" :key="index" @click=" play(item)">
                  <div class="icon">
                    <div class="imageicon flex_center">
                      <img src="../content/ranklist/images/play.png" alt="" />
                    </div>
                    <img v-lazy="item.album.picUrl" alt="" />
                  </div>
                  <div class="right-desc">
                    <p class="name">{{ item.name }}</p>
                    <p class="desc">{{ item.artists[0].name }}</p>
                  </div>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "songDetail",
  data() {
    return {
      test: {},
      textarea2: "",
      similarSongs: [],
    };
  },
  methods: {
    //播放相关
    play(item) {
      document
        .getElementsByClassName("audio-play")[0]
        .classList.add("audio-stop");

      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/song/url?timetamp=" + new Date().getTime(),
        params: {
          id: item.id,
        },
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/song/detail?timetamp=" +
            new Date().getTime(),
          params: {
            ids: item.id,
          },
        }).then((res) => {
          console.log("歌曲详情", res.data);
          this.currentMusic = res.data.songs[0];
          this.$store.state.nowMusic = this.currentMusic;
          this.$store.state.playMusicList.push(this.currentMusic);
          //数组对象去重
          let obj = {};
          this.$store.state.playMusicList = this.$store.state.playMusicList.reduce(
            function (item, next) {
              obj[next.id] ? "" : (obj[next.id] = true && item.push(next));

              return item;
            },
            []
          );
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/lyric?timetamp=" + new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveLyric", res.data.lrc.lyric);
            console.log("歌词存储成功");
          });
          //评论获取
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/comment/music?timetamp=" +
              new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveComment", res.data);
            console.log("歌曲评论储存成功", this.$store.state.songcomment);
          });
          console.log("添加歌单成功", this.$store.state.playMusicList);
          console.log("仓库现在的音乐", this.$store.state.nowMusic);
        });
        // console.log(res.data);
        let aud = document.getElementsByTagName("audio")[0];
        aud.setAttribute("src", res.data.data[0].url);
        aud.play();
      });
    },
    //分页事件
    handleCurrentChange(val) {
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/comment/music?timetamp=" +
          new Date().getTime(),
        params: {
          id: this.$store.state.nowMusic.id,
          offset: (val - 1) * 20,
        },
      }).then((res) => {
        this.$store.commit("saveComment", res.data);
      });
    },
  },
  created() {
    //相似歌曲
    this.axios({
      withCredentials: true,
      method: "get",
      url: "https://music.hzbiz.net/simi/song?timetamp=" + new Date().getTime(),
      params: {
        id: this.$store.state.nowMusic.id,
      },
    }).then((res) => {
      this.similarSongs = res.data;
      console.log(res.data);
    });
    //歌词正则判断//reg匹配时间
    let reg = new RegExp("[[0-9]*:[0-9]*.[0-9]*]*", "ig");
    // console.log(this.$store.state.lyric.split(reg));
    // console.log(this.$store.state.lyric.split("\n"));
    //得到时间*****
    //  console.log(reg.exec(this.$store.state.lyric.split('\n')[0])[0])
    let str = /[0-9]*:[0-9]*.[0-9]*/gi.exec(
      this.$store.state.lyric.split("\n")[2]
    )[0];
    //test
    // console.log(str.split(":"));
    // console.log(parseInt(str.split(":")[0]), Number(str.split(":")[1]));
    // console.log(
    //   parseInt(str.split(":")[0]),
    //   Math.floor(this.$store.state.nowTime / 60)
    // );
    // console.log(parseInt(str.split(":")[1]), this.$store.state.nowTime % 60);

    //  console.log(`${Math.floor(this.$store.state.nowTime / 60) < 10? '0' + Math.floor(this.$store.state.nowTime / 60):Math.floor(this.$store.state.nowTime/ 60)}:${ (this.$store.state.nowTime  % 60).toFixed(2) < 10 ? '0' +((this.$store.state.nowTime  % 60).toFixed(2)):(this.$store.state.nowTime  % 60).toFixed(2)}`);
    //  console.log(this.$store.state.lyric.test(reg));
  },
  mounted() {
    //歌词加粗
    // console.log(this.$store.state.lyric.split("\n"));
    setInterval(() => {
      let oLi = document.querySelectorAll(".ly-content li");

      for (let index = 0; index < oLi.length; index++) {
        //  let str = /[0-9]*:[0-9]*.[0-9]*/gi.exec(this.$store.state.lyric.split("\n")[index])[0];
        const element = oLi[index];
        if (index > 1) {
          if (
            /[0-9]*:[0-9]*.[0-9]*/gi.exec(
              this.$store.state.lyric.split("\n")[index - 1]
            ) &&
            /[0-9]*:[0-9]*.[0-9]*/gi.exec(
              this.$store.state.lyric.split("\n")[index]
            )
          ) {
            if (
              parseInt(
                /[0-9]*:[0-9]*.[0-9]*/gi
                  .exec(this.$store.state.lyric.split("\n")[index - 1])[0]
                  .split(":")[0]
              ) <= Math.floor(this.$store.state.nowTime / 60) &&
              Math.floor(this.$store.state.nowTime / 60) <=
                parseInt(
                  /[0-9]*:[0-9]*.[0-9]*/gi
                    .exec(this.$store.state.lyric.split("\n")[index])[0]
                    .split(":")[0]
                )
            ) {
              if (
                parseInt(
                  /[0-9]*:[0-9]*.[0-9]*/gi
                    .exec(this.$store.state.lyric.split("\n")[index - 1])[0]
                    .split(":")[1]
                ) <
                  (this.$store.state.nowTime % 60) + 5 &&
                (this.$store.state.nowTime % 60) + 5 <
                  parseInt(
                    /[0-9]*:[0-9]*.[0-9]*/gi
                      .exec(this.$store.state.lyric.split("\n")[index])[0]
                      .split(":")[1]
                  )
              ) {
                element.classList.add("strong");
              } else {
                element.classList.remove("strong");
              }
            }
          }
        }
      }
    }, 30);
    setInterval(() => {
      if (document.getElementsByClassName("lyric")[0]) {
        let scrollHeight = document.getElementsByClassName("ly-content")[0]
          .offsetHeight; //当前页面的总高度
        let clientHeight = document.getElementsByClassName("lyric")[0]
          .clientHeight; //当前可视的页面高度
        document.getElementsByClassName("lyric")[0].scrollTop =
          (scrollHeight - clientHeight) *
          (document.getElementsByTagName("audio")[0].currentTime /
            document.getElementsByTagName("audio")[0].duration);
      }
    }, 50);
  },
};
</script>

<style scoped>
#songDetail .images {
  margin-top: 50px;
  width: 320px;
  height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background-image: url("../../assets/images/dico.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 115%;
  animation: rotating 9s linear infinite;
  margin-bottom: 30px;
}
#songDetail .images .icon {
  position: absolute;
  width: 198px;
  height: 198px;
  overflow: hidden;
  border-radius: 50%;
  top: calc(50% - 99px);
  left: calc(50% - 99px);
}
.title {
  margin-top: 35px;
}
.title p.songname {
  font-size: 25px;
}
.title .tags {
  padding: 2px;
  border: 1px solid #ec4141;
  font-size: 12px;
  text-align: center;
  border-radius: 3px;
  color: #ec4141;
  margin-left: 10px;
  line-height: 15px;
  opacity: 0.8;
}
.title .tags.mv {
  cursor: pointer;
}
.song-desc {
  margin-top: 17px;
}
.song-desc p span {
  cursor: pointer;
  color: #6c92bc;
}
.song-desc p span:hover {
  color: rgb(49, 122, 158);
}
.btns {
  width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.btns:hover {
  background-color: #dfdcdc;
}
.lyric {
  width: 100%;
  height: 330px;
  margin-top: 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  overflow-y: scroll;
  overflow-x: hidden;
}
.lyric::-webkit-scrollbar{
  border: rgba(0, 0, 0, 0.1);
  width: 5px;
}

.lyric li {
  line-height: 20px;
  color: #666666;
  margin-bottom: 5px;
  display: flex;
  align-items: flex-end;
}
.lyric li.strong {
  color: #000;
  font-weight: bold;
}
.comment-content {
  margin-top: 70px;
  margin-bottom: 155px;
}
.comment p.titles {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 26px;
}
.comment span.comment-num {
  color: #666666;
  font-size: 14px;
  font-weight: normal;
  margin-left: 3px;
}
.comment p.tit {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  margin-top: 40px;
}
.hot-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
  margin-top: 20px;
}
.hot-item .left .user-comm {
  width: 495px;
  margin-left: 15px;
}
.hot-item .left .icon {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
}
.hot-item .left {
  display: flex;
  justify-content: flex-start;
}
.hot-item .left .username {
  color: #000;
  margin-bottom: 10px;
}
.hot-item .left .username span {
  color: #6c92bc;
}
.hot-item .right {
  display: flex;
  justify-content: space-between;
}
.hot-item .right ul {
  display: flex;
  justify-content: flex-end;
}
.hot-item .right ul li {
  padding: 0 10px;
  cursor: pointer;
  color: #666666;
}
.hot-item .right ul li:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.hot-item .right ul li:first-child {
  visibility: hidden;
}
.hot-item:hover .right ul li:first-child {
  visibility: visible;
}
.more-btn {
  width: 135px;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 50px;
}
.page {
  padding-top: 30px;
}
.right-list > p {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.right-list li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  padding: 5px;
  border-radius: 5px;
}
.right-list li:hover {
  background-color: #cfcece;
}
.right-list li .icon {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.right-list li .right-desc {
  margin-left: 10px;
  width: 70%;
}
.right-list li .imageicon{
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  top:calc(50% - 12px);
  left: calc(50% - 12px);
  overflow: hidden;
  background-color: #ffffff;
  opacity: 0.9;
}
.right-list li .imageicon img{
  width: 60%;
  margin-left: 3px;
}
@keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>